<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>新攻防赛题目</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../admin/css/other/eventCenter.css" />
</head>

<body>
    <div class="page-container">
        <form class="layui-form" action="">
            <div class="search-form">
                <div class="layui-row">
                    <div class="layui-col-xs3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">题目</label>
                            <div class="layui-input-block">
                                <input type="text" name="keyward" id="keyward" class="layui-input layui-input-white" lay-verify="required" placeholder="请输入关键词"
                                    autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">分类</label>
                            <div class="layui-input-block">
                                <select name="type" lay-filter="type" id="type">
                                    <option value=""></option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">难度</label>
                            <div class="layui-input-block">
                                <select name="method" lay-filter="method" id="method">
                                    <option value="">全部</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs2 search-btn">
                        <button type="button" class="layui-btn layui-btn-container" id="btnQuery">搜索</button>
                        <button type="button" class="layui-btn layui-btn-primary" id="btnReset">重置</button>
                    </div>
                </div>
            </div>
        </form>
        <div class="layui-card">
            <div class="layui-card-body">
                <table class="layui-hide" id="xgfsTable" lay-filter="xgfsTable"></table>
            </div>
        </div>
    </div>
    <div id="xgfsFormLayer" class="xgfs-form-layer open-form-layer" style="display: none;">
        <form class="layui-form">
            <div class="layui-form-item ">
                <label class="layui-form-label label-110"><span class="required-span">*</span>题目标题</label>
                <div class="layui-input-block">
                    <input type="text" name="keyward" id="keyward" class="layui-input layui-input-white" lay-verify="required" placeholder="请输入题目标题"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label label-110"><span class="required-span">*</span>题目分类</label>
                <div class="layui-input-block">
                    <select name="type" lay-filter="type" id="type" lay-verify="required">
                        <option value="1">未分类</option>
                        <option value="2">理论题</option>
                        <option value="3">金砖大赛</option>
                        <option value="4">金砖区域选拔赛</option>
                        <option value="5">电子数据取证分析师赛项初赛理论试题</option>
                        <option value="6">焊工</option>
                        <option value="7">网络与信息安全管理员赛项题目</option>
                        <option value="8">化学检验员</option>
                        <option value="9">第一阶段</option>
                        <option value="10">理论赛题</option>
                        <option value="11">HG理论赛题</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label label-110"><span class="required-span">*</span>难度级别</label>
                <div class="layui-input-block">
                    <select name="type" lay-filter="type" id="type" lay-verify="required">
                        <option value="1">入门</option>
                        <option value="2">简单</option>
                        <option value="3">普通</option>
                        <option value="4">困难</option>
                        <option value="5">地域</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label label-110">题目描述</label>
                <div class="layui-input-block">
                    <textarea class="layui-textarea" placeholder="请输入题目描述"></textarea>
                </div>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label label-110"><span class="required-span">*</span>虚拟节点</label>
                <div class="layui-input-block">
                    <select name="type" lay-filter="type" id="type" lay-verify="required">
                        <option value="1">节点 / 20Core / 98GB</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label label-110"><span class="required-span">*</span>题目镜像</label>
                <div class="layui-input-block">
                    <select name="type" lay-filter="type" id="type" lay-verify="required">
                        <option value="1">入门</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label label-110"><span class="required-span">*</span>映射端口</label>
                <div class="layui-input-block">
                    <input type="radio" name="port" value="80" title="80/tcp" checked />
                    <input type="radio" name="port" value="other" title="其他" checked />
                </div>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label label-110">其他端口</label>
                <div class="layui-input-block">
                    <input type="text" name="keyward" id="keyward" class="layui-input layui-input-white" lay-verify="required" placeholder="请输入题目标题"
                        autocomplete="off" class="layui-input">
                    <span><span class="required-span">*</span>格式 `4400/tcp`、`4400/udp`、4400(默认tcp)</span>
                </div>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label label-110"><span class="required-span">*</span>访问协议</label>
                <div class="layui-input-block">
                    <input type="radio" name="port" value="http" title="HTTP[Web推荐]" checked />
                    <input type="radio" name="port" value="tcp" title="TCP[Pwn推荐]" checked />
                </div>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label label-110">CPU限制</label>
                <div class="layui-input-block">
                    <input type="text" name="keyward" id="keyward" class="layui-input layui-input-white" lay-verify="required" placeholder="请输入题目标题"
                        autocomplete="off" class="layui-input">
                    <span><span class="required-span">*</span>留空或`0`则为不限制</span>
                </div>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label label-110">内存限制</label>
                <div class="layui-input-block">
                    <input type="text" name="keyward" id="keyward" class="layui-input layui-input-white" lay-verify="required" placeholder="请输入题目标题"
                        autocomplete="off" class="layui-input">
                    <span><span class="required-span">*</span>留空或`0`则为不限制</span>
                </div>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label label-110"><span class="required-span">*</span>Flag类型</label>
                <div class="layui-input-block">
                    <select name="type" lay-filter="type" id="type" lay-verify="required">
                        <option value="1">入门</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label label-110"><span class="required-span">*</span>Flag值</label>
                <div class="layui-input-block">
                    <input type="text" name="keyward" id="keyward" class="layui-input layui-input-white" lay-verify="required" placeholder="请输入题目Flag"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label label-110"><span class="required-span">*</span>修复命令</label>
                <div class="layui-input-block">
                    <input type="text" name="keyward" id="keyward" class="layui-input layui-input-white" lay-verify="required" placeholder="请输入题目Flag"
                        autocomplete="off" class="layui-input">
                    <span><span class="required-span">*</span>请输入防御修补命令白名单，留空则不限制</span>
                </div>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label label-110">题目附件</label>
                <div class="layui-input-block">
                    <div class="upload-input-btn">
                        <input type="text" name="keyward" id="keyward" class="layui-input layui-input-white" lay-verify="required" placeholder="支持本地上传和外部链接"
                            autocomplete="off" class="layui-input" style="width: 80%;" />
                        <button type="button" class="layui-btn" id="attach-upload">本地上传</button>
                    </div>
                    <div class="layui-upload-list" id="demo-upload-img"></div>
                    <div><span class="required-span">*</span>请zip后缀压缩文件，大小不超过20M</div>
                </div>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label label-110">WriteUp</label>
                <div class="layui-input-block">
                    <div class="upload-input-btn">
                        <input type="text" name="keyward" id="keyward" class="layui-input layui-input-white" lay-verify="required" placeholder="支持本地上传和外部链接"
                            autocomplete="off" class="layui-input" style="width: 80%;" />
                        <button type="button" class="layui-btn" id="writeup-upload">本地上传</button>
                        <div class="layui-upload-list" id="demo-upload-img"></div>
                    </div>
                    <div><span class="required-span">*</span>请上传doc,docx,md,pdf,txt,zip格式文件，大小不超过10M</div>
                </div>
            </div>
        </form>
    </div>
    <script type="text/html" id="operation">
        <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
    </script>
    <script type="text/html" id="modeSwitch">
        <input type="checkbox" name="{{d.mode}}" value="{{d.mode}}" title="内部赛" lay-skin="switch"
            lay-filter="modeSwitch" {{d.mode == 1 ? "checked" : ""}} >
    </script>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn" lay-event="getData"><i class="layui-icon layui-icon-add-1"></i>创建题目</button>
            <button type="button" lay-event="deleteRows" class="layui-btn layui-btn-primary" id="btnReset" style="color: #fff;">
                <i class="layui-icon layui-icon-delete" style="color: #fff;"></i>删除选中
            </button>
        </div>
    </script>
    <script>
        layui.use(['table', 'dropdown', 'form', 'jquery', 'layer', 'laydate'], function () {
            var table = layui.table;
            var dropdown = layui.dropdown;
            var form = layui.form;
            var $ = layui.jquery;
            var laydate = layui.laydate;

            form.render('select');
            form.render('radio');
            var start = "#startTime", end = "#endDate";//开始时间选择框、结束时间选择框：文本框
            var startTime = laydate.render({
                elem: '#startTime',
                max: '2099-12-31 23:59:59',
                done: function (value, date) {
                    endTime.config.min = {
                        year: date.year,
                        month: date.month - 1, //关键：由于月份是从0开始的，所以实际选择时要减1
                        date: date.date,
                        hours: date.hours,
                        minutes: date.minutes,
                        seconds: date.seconds
                    };
                }
            })
            // 结束时间
            var endTime = laydate.render({
                elem: '#endTime',
                max: '2099-12-31 23:59:59',
                done: function(value, date){
                    startTime.config.max = {
                        year: date.year,
                        month: date.month - 1, //关键：由于月份是从0开始的，所以实际选择时要减1
                        date: date.date,
                        hours: date.hours,
                        minutes: date.minutes,
                        seconds: date.seconds
                    };
                }
            });
            // 创建渲染实例
            table.render({
                elem: '#xgfsTable',
                url: '../../admin/data/xgfs.json', // 此处为静态模拟数据，实际使用时需换成真实接口
                toolbar: '#toolbarDemo',
                defaultToolbar: ['filter', 'exports', 'print'],
                height: 'full-35', // 最大高度减去其他容器已占有的高度差
                css: [ // 重设当前表格样式
                    '.layui-table-tool-temp{padding-right: 145px;}'
                ].join(''),
                cellMinWidth: 80,
                totalRow: true, // 开启合计行
                page: true,
                cols: [[
                    { type: 'checkbox', fixed: 'left' },
                    { field: 'tm', title: '题目' },
                    { field: 'category', title: '分类'},
                    { field: 'difficulty', title: '难度',
                        templet: function (d) {
                            var methodStyle = "width: 80px; border-radius: 4px; text-align: center;";
                            if (d.difficulty == 1) {
                                return `<div style="${methodStyle}border: 1px solid #22E29B; color: #22E29B">入门</div>`
                            } else if (d.difficulty == 2) {
                                return `<div style="${methodStyle}border: 1px solid #60D0FF; color: #60D0FF">简单</div>`
                            } else if (d.difficulty == 3) {
                                return `<div style="${methodStyle}border: 1px solid #7AA2FF; color: #7AA2FF">普通</div>`
                            } else if (d.difficulty == 4) {
                                return `<div style="${methodStyle}border: 1px solid #FFBC60; color: #FFBC60">困难</div>`
                            } else if (d.difficulty == 5) {
                                return `<div style="${methodStyle}border: 1px solid #FF4D4D; color: #FF4D4D">地狱</div>`
                            }
                        } 
                    },
                    { field: 'type', title: '虚拟节点' },
                    { field: 'flag', title: '镜像' },
                    { field: 'port', title: '端口' },
                    { field: 'attach', title: '附件',
                        templet: function (d) {
                            var style = "background: rgba(255,255,255,0.14) !importent;border-radius: 4px; color: #FFFFFF; width: 68px; height: 26px; line-height: 26px";
                            if (d.attach == '') return `<button type="button" class="layui-btn layui-btn-sm layui-btn-primary table-download-btn" id="btnReset" style="${style}"><i class="layui-icon layui-icon-download-circle" style="color: #ffffff;"></i>下载</button>`
                        }
                    },
                    { field: 'wp', title: 'WP',
                        templet: function (d) {
                            if (d.wp == '') return "无"
                        }
                    },
                    { field: 'wp', title: 'WP' },
                    { field: 'creatTime', title: '创建时间' },
                    { field: '操作', title: '操作', width: 200, toolbar: '#operation' }
                ]]
            });

            function openxgfsLayer () {
                layer.open({
                    type: 1,
                    zIndex: 19891015,
                    skin: 'previewImg',
                    title: '<div class="height: 10px; width: 1px; border: 1px solid red;"></div>创建题目',
                    content: $("#xgfsFormLayer"), // 获取ID为formLayer的DOM元素
                    area: ['780px', '735px'],
                    btn: ['提交', '取消'],
                    shade: 0.5, // 遮罩层透明度，0为不显示
                    shadeClose: false,
                    success: function(layero, index){
                        var shade = $('.layui-layer-shade');
                        console.log(layer.zIndex);
                        shade.css('z-index', 899);
                    },
                    yes: function(index, layero){
                        // 表单提交事件
                        // 触发提交事件
                        form.on('submit(formSubmit)', function(data){
                        // 发送Ajax请求提交表单
                        // $.post('path/to/your/server/endpoint', data.field, function(response){
                        //     layer.msg('表单提交成功!', {time: 1000});
                        //     // 关闭弹框
                        //     layer.close(index);
                        // });
                        return false; // 阻止表单默认提交
                        });
                    }
                });
            }

            // 工具栏事件
            table.on('toolbar(xgfsTable)', function (obj) {
                var id = obj.config.id;
                var checkStatus = table.checkStatus(id);
                var othis = lay(this);
                switch (obj.event) {
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(layui.util.escape(JSON.stringify(data)));
                        break;
                    case 'getData':
                        openxgfsLayer();
                        break;
                    case 'deleteRows':
                        layer.confirm('确定要删除选中的理论题目?', function (index) {
                            layer.close(index);
                            // 向服务端发送删除指令
                        });
                        break;
                    case 'LAYTABLE_TIPS':
                        layer.alert('自定义工具栏图标按钮');
                        break;
                };
            });

            // 触发单元格工具事件
            table.on('tool(xgfsTable)', function (obj) { // 双击 toolDouble
                var data = obj.data; // 获得当前行数据
                if (obj.event === 'edit') {
                    openxgfsLayer();
                } else if (obj.event === 'del') {
                    layer.confirm('确定要删除该理论题目?', function (index) {
                        obj.del(); // 删除对应行（tr）的DOM结构
                        layer.close(index);
                        // 向服务端发送删除指令
                    });
                }
            });

            // 触发表格复选框选择
            table.on('checkbox(xgfsTable)', function (obj) {
                console.log(obj)
            });

            var upload = layui.upload;
            
            //图片上传
            upload.render({
                elem: '#attach-upload' //绑定元素
                ,url: '/upload/' //改为你的图片上传接口
                ,size: 20480 //设置文件最大可上传大小，单位KB
                ,exts: 'zip|rar' //设置可上传文件的扩展名
                ,before: function(obj){
                    // 获取文件后缀
                    var fileExtension = obj.file.name.substring(obj.file.name.lastIndexOf('.') + 1);
                    // 这里可以设置允许上传的文件后缀
                    var allowExtensions = ['zip'];
                
                    if($.inArray(fileExtension, allowExtensions) == -1){
                        layer.msg('文件格式不正确，请上传jpg、png、jpeg、gif、bmp格式的图片！', function(){
                        // 清除对象里的文件，可以避免重复上传相同文件
                        obj.upload.filename = '';
                        });
                        // 返回false可以阻止文件上传
                        return false;
                    }
                    
                    // 继续执行上传操作
                    return true;
                }
                ,done: function(res){
                    debugger
                    //上传完毕回调
                    if(res.code == 0){
                        //假设返回的res.data是图片链接
                        $('#demo-upload-img').append('<img src="'+ res.data +'" alt="上传成功" class="layui-upload-img">');
                    }
                }
                ,error: function(){
                    //请求出错的处理
                    console.log('上传失败');
                }
            });
        });
    </script>
</body>

</html>